<template>
<Page>
    <template #hd>
        <!-- 搜索 -->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="分组ID">
            <el-input placeholder="请输入分组ID" clearable />
            </el-form-item>
            <el-form-item label="分组名称">
            <el-input placeholder="请输入分组名称" clearable />
            </el-form-item>
            <el-form-item label="状态">
            <el-select
                placeholder="状态"
                clearable
            >
                <el-option label="启用" value="启用" />
                <el-option label="禁用" value="禁用" />
            </el-select>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button type="primary" @click="onSubmit">重置</el-button>
            <el-button @click="addGroupShow = true">+ 新增</el-button>
            </el-form-item>
        </el-form>
    </template>
    <template #ct>
        <!-- 列表 -->
        <el-table :data="groupList" style="width: 100%">
            <el-table-column prop="id" label="分组ID" />
            <el-table-column prop="groupname" label="分组名称" />
            <el-table-column prop="couponno" label="卡券数量" />
            <el-table-column  label="创建时间" align="center">
                    <template #default="{row}">
                        <span>{{ setData(row.createdAt) }}</span>
                    </template>
            </el-table-column>
            <el-table-column label="更新时间" align="center">
                <template #default="{row}">
                    <span>{{ setData(row.updatedAt) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
                <template #default="{row}">
                    <el-switch
                        :before-change="()=>changeSwitch(row, row.state, row.id)"
                        v-model="row.state"
                        class="ml-2"
                        :inactive-value="0"
                        :active-value="1"
                        style="--el-switch-on-color: #00acac; --el-switch-off-color: #dcdfe6"
                    />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="{row}">
                    <span @click="handleShowEdit({...row})" class="edit">
                    <span class="iconfont icon-xiugai"></span>
                        修改
                    </span>
                    <el-popconfirm title="确定删除吗?" @confirm="confirmEvent(row.id)">
                        <template #reference>
                            <span class="edit">
                            <span class="iconfont icon-shanchu"></span>
                                删除
                            </span>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <template #ft>
        <el-pagination
            :page-sizes="[10, 30, 50, 100]"
            :default-page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            background
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
         />
    </template>
</Page>
<!-- 新增弹窗 -->
<el-dialog v-model="addGroupShow" title="新增卡券分组" width="658" :destroy-on-close="true">
<el-form :model="group">
    <el-form-item label="分组名称" :label-width="100">
        <el-input v-model="group.groupname" autocomplete="off" />
    </el-form-item>
    <el-form-item label="备注信息" :label-width="100">
        <el-input type="textarea" v-model="group.remarkscore" autocomplete="off" />
    </el-form-item>
    <el-form-item label="状态" :label-width="100">
        <el-radio-group v-model="group.state" class="ml-4">
            <el-radio label="1" size="large">启用</el-radio>
            <el-radio label="2" size="large">禁用</el-radio>
        </el-radio-group>
    </el-form-item>
</el-form>
    <template #footer>
        <span class="dialog-footer">
        <el-button type="primary" @click="addGroupA">确认</el-button>
        <el-button @click="addGroupShow = false">
            取消
        </el-button>
        </span>
    </template>
</el-dialog>
<!-- 编辑弹窗 -->
<el-dialog v-model="editGroupShow" title="编辑卡券分组" width="658">
<el-form :model="editGroup">
    <el-form-item label="分组名称" :label-width="100">
        <el-input v-model="editGroup.groupname" autocomplete="off" />
    </el-form-item>
    <el-form-item label="备注信息" :label-width="100">
        <el-input type="textarea" v-model="editGroup.remarkscore" autocomplete="off" />
    </el-form-item>
    <el-form-item label="状态" :label-width="100">
        <el-radio-group v-model="editGroup.state" class="ml-4">
            <el-radio label="1" size="large">启用</el-radio>
            <el-radio label="2" size="large">禁用</el-radio>
        </el-radio-group>
    </el-form-item>
</el-form>
    <template #footer>
        <span class="dialog-footer">
        <el-button type="primary" @click="editGroupA">确认</el-button>
        <el-button @click="editGroupShow = false">
            取消
        </el-button>
        </span>
    </template>
</el-dialog>

</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElMessage, ElMessageBox, dayjs } from 'element-plus';
import { InfoFilled } from '@element-plus/icons-vue';
import { addGroup, GroupList, delGroup, updateGroup } from '@/api/group';

export default defineComponent({
    data() {
        return {
            addGroupShow: false,
            group: {
                groupname: '',
                remarkscore: '',
                state: '',
                couponno: 0,
            },
            groupList: [],
            page: 1,
            limit: 30,
            total: 0,
            editGroup: {
                groupname: '',
                remarkscore: '',
                state: '',
                couponno: 0,
                id: 0,
            },
            editGroupShow: false,
        };
    },
    methods: {
        onSubmit() {

        },
        // 添加分组
        async addGroupA() {
            const res = await addGroup(this.group);
            const { status } = res;
            const { groupname } = res.data;
            // console.log('res===============', groupname);
            // this.$store.commit('setOptions', groupname);
            if (status === 201) {
                this.$message.success('添加成功');
                this.addGroupShow = false;
                this.getList();
            }
        },
        // 获取分组列表
        async getList() {
            const $skip = (this.page - 1) * this.limit;
            const res = await GroupList({
                $skip,
                $limit: this.limit,
            });
            this.groupList = res.data.data;
            this.total = res.data.total;
            // console.log('长度', res.data.data.length);
            for (let key in res.data.data) {
                // console.log('key', res.data.data[key].groupname);
                this.$store.commit('setOptions', res.data.data[key].groupname);
            }
        },
        // 处理分页
        handleSizeChange(val: number) {
            console.log('val', val);
            this.limit = val;
            this.getList();
        },
        handleCurrentChange(val: number) {
            this.page = val;
            this.getList();
        },
        // 状态改变的方法
        changeSwitch(row: any, val: number, id: number) {
            console.log('valvalvalval', row.state);
            if (!val) {
                console.log('启动');
                ElMessageBox.confirm(
                    `确定启用ID等于"${id}"的数据项吗？`,
                    '系统提示',
                    {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                    },
                  )
                    .then(async () => {
                        console.log('点击了确认');
                        this.editDengji = row;
                        // console.log('this.editDengji', this.editDengji);
                        let { ...postdata } = this.editDengji;
                        // console.log('this.postdata', id, postdata);
                        postdata.state = 1;
                        // console.log('this.postdata', id, postdata.state);
                        await updateGroup(id, postdata);
                        this.getList();
                      ElMessage({
                        type: 'success',
                        message: '启用成功',
                      });
                    }).catch(async () => {
                      this.editDengji = row;
                    //   console.log('this.editDengji', this.editDengji);
                        let { ...postdata } = this.editDengji;
                        // console.log('this.postdata', id, postdata);
                        postdata.state = 0;
                        // console.log('this.postdata', id, postdata.state);
                        await updateGroup(id, postdata);
                        this.getList();
                    });
            } else {
                console.log('关闭');
                ElMessageBox.confirm(
                    `确定禁用ID等于"${id}"的数据项吗？`,
                    '系统提示',
                    {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                    },
                  )
                    .then(async () => {
                        this.editDengji = row;
                        // console.log('this.editDengji', this.editDengji);
                        let { ...postdata } = this.editDengji;
                        // console.log('this.postdata', id, postdata);
                        postdata.state = 0;
                        // console.log('this.postdata', id, postdata.state);
                        await updateGroup(id, postdata);
                        this.getList();
                        ElMessage({
                            type: 'success',
                            message: '禁用成功',
                        });
                    }).catch(async () => {
                        this.editDengji = row;
                        // console.log('this.editDengji', this.editDengji);
                        let { ...postdata } = this.editDengji;
                        // console.log('this.postdata', id, postdata);
                        postdata.state = 1;
                        // console.log('this.postdata', id, postdata.state);
                        await updateGroup(id, postdata);
                        this.getList();
                    });
            }
        },
        // 时间格式化方法
        setData(t:string) {
            const newtime = dayjs(t).format('YYYY-MM-DD HH:mm'); // 初始化日期时间
            return newtime;
        },
        // 修改按钮
        handleShowEdit(row: any) {
            this.editGroup = row;
            // console.log('点击了修改', this.editGroup);
            this.editGroupShow = true;
        },
        // 编辑的确认按钮
        async editGroupA() {
            const { id, ...postdata } = this.editGroup;
            const res = await updateGroup(id, postdata);
            const { status } = res;
            if (status === 200) {
                this.$message.success('修改成功');
                this.editGroupShow = false;
                this.getList();
            }
        },
        // 气泡确认按钮
        async confirmEvent(id:number) {
            console.log('点击了确认', id);
            const res = await delGroup(id);
            console.log('删除', res);
            this.$message.success('删除成功');
            this.getList();
        },
    },
    mounted() {
        this.getList();
    },
});
</script>

<style scoped lang="scss">
@import '../../assets/search.scss';
</style>
